import React,{useState,useEffect} from 'react'
import useList from '../hooks/use-list'
import { useQuery, useMutation, useQueryClient } from 'react-query'
import { getTopics, postTopic } from '../api/cnode';

const Cnode = () => {
    const [tab, setTab] = useState('');
    const client = useQueryClient();
    const {data, loading, error} = useQuery(
        ['getTopics', tab],
        ()=>getTopics(tab)
    );

    // const [list,loading,handleTab] = useList()//自定义hook

    //发布函数
    const mutation = useMutation(
        postTopic,
        {
            onError(error){
                console.log(error)
            },
            onSuccess(data){
                client.invalidateQueries(['getTopics',tab],);
            }
        }
    )
    const post = ()=>{
        mutation.mutate({
            title:'区域与双边自由贸易协定新发展',
            tab:'dev',
            content:'发布一条内容',
            accesstoken:' f61bb071-b10c-4736-986b-64abcaf12ecb'
        })
    }

    if(loading){
        return <div>loading...</div>
    }

    return (
        <div style={{display:'flex'}}>
            <div>
                <div>
                    <button>全部</button>
                    <button onClick={()=>setTab('good')}>精华</button>
                    <button onClick={()=>setTab('share')}>分享</button>
                    <button onClick={()=>setTab('ask')}>问答</button>   
                    <button onClick={()=>setTab('dev')}>测试</button>   
                </div>
                {
                    data?.data.map(item=>(
                    <li key={item.id}>{item.title}</li>
                    ))
                }
            </div>
            <div>
                <button disabled={mutation.isLoading} onClick={post}>发布</button>
            </div>
        </div>
    )
}

export default Cnode